<!-- 顶部导航 -->
<template>
  <el-carousel ref="carouselRef" height="40rem" :autoplay="false" :loop="false" trigger="click" arrow="always" indicator-position="none">
    <el-carousel-item v-for="(item, index) in Math.ceil(menuStore.topMenu.length / props.menuNumber) == 0 ? 1 : Math.ceil(menuStore.topMenu.length / props.menuNumber)" :key="item.label">
      <div
        :style="{ width: `calc(100% / ${menuNumber})` }"
        class="menu-name"
        :class="{ active: menuStore.activeRoute.label == subItem.label }"
        v-for="subItem in menuStore.topMenu.slice(index * menuNumber, (index + 1) * menuNumber)"
        :key="subItem.label"
        @click.self="clickRoute(subItem)"
      >
        {{ subItem.label }}
        <el-icon v-if="subItem.label != '首页'" size="18rem" @click="closeRoute(subItem)" color="#ccc"><CircleCloseFilled /></el-icon>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup name="TopNavigation">
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
import { stores } from '@/stores/index.js'
import { useRouter, useRoute } from 'vue-router'
import { number } from 'echarts'
const router = useRouter()
const route = useRoute()
const userStore = stores.useUserStore()
const menuStore = stores.useMenuStore()
const props = defineProps({
  menuNumber: {
    //一行显示多少个菜单
    type: [String, Number],
    default: 15
  }
})
const carouselRef = ref()

//定位当前导航菜单所在的carouselItem项
watch(
  () => menuStore.activeRoute,
  (newVal) => {
    const index = menuStore.topMenu.findIndex((item) => item.label == newVal.label)

    if (index < props.menuNumber) {
      carouselRef.value.setActiveItem(0)
    } else {
      const activeCarouselItemIndex = Math.floor((index + 1) / props.menuNumber)
      carouselRef.value.setActiveItem(activeCarouselItemIndex)
    }
  },
  {
    deep: true
  }
)

onMounted(() => {})
onBeforeUnmount(() => {})
const clickRoute = (item) => {
  console.log(item)
  menuStore.setActiveRoute({
    label: item.label,
    path: item.path
  })
  if (item.path.includes('http')) {
    menuStore.iframeSrc = item.path
  } else {
    menuStore.iframeSrc = ''
    router.push({
      path: item.path
    })
  }
}
const closeRoute = async (route) => {
  const index = menuStore.topMenu.findIndex((item) => item.label == route.label)
  menuStore.topMenu.splice(index, 1)
  // await nextTick()
  menuStore.activeRoute = menuStore.topMenu[index] || menuStore.topMenu[index + 1] || menuStore.topMenu[index - 1] || menuStore.topMenu[0] || { label: '首页', path: '/home' }
  console.log(menuStore.activeRoute)
  if (menuStore.activeRoute.path.includes('http')) {
    menuStore.iframeSrc = menuStore.activeRoute.path
  } else {
    menuStore.iframeSrc = ''
    router.push({
      path: menuStore.activeRoute.path
    })
  }
}
</script>
<style lang="scss" scoped>
.el-carousel {
  // border: 1px solid red;
  background-color: #fff;
  .el-carousel__item {
    display: flex;
    justify-content: flex-start;
    .menu-name {
      position: relative;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      .el-icon {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        display: none;
      }
      &.active {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-8);
        &:hover {
          .el-icon {
            color: #fff;
            border-radius: 50%;
            background-color: var(--el-color-primary);
          }
        }
      }
      &:hover {
        background-color: var(--el-color-primary-light-8);
        .el-icon {
          display: block !important;
          color: #ccc;
        }
      }
      &.go-home {
        padding-right: 15px;
      }
    }
  }
  .el-carousel__arrow {
    background-color: var(--el-color-primary-light-5) !important;
  }
}
</style>
